<template>
    <div  >
        <div  v-for="i in listImg" >
<!--            <img :src="i.cover" alt="" class="two"  >-->
            <router-link to="/themeDetails" >
              <img :src="i.cover" alt="" class="two" @click="imgId(i.id)" >
            </router-link>
        </div>
    </div>
</template>


<script setup lang="ts">

    import getThemeList from "@/api/theme"
    import getImgIdList from "@/api/theme"
    import {ref,onMounted} from 'vue'
    import router from "@/router";
    let listImg=ref<any>();
    let listId=ref();

    function  imgId(value: any){
      // console.log(value);
      let listId=value;
      getId(listId);
    }
       // router.push({path:'/themeDetails',query:{id:JSON.stringify(listId)}})

    onMounted(() => {
        getPage();
    })

    const getId = async (listId:number) => {
      try {
        console.log(listId)
        let listI = (await getImgIdList.getImgIdList(listId)) as any;
        console.log(listI)
      } catch (error) {
        console.log(2222)
      }
    }
    
    const getPage = async () => {
         try {
                let list = (await getThemeList.getThemeList()) as any;
                listImg.value=list.content
            // console.log('this.listImg====',listImg.value);
        } catch (error) {
                 console.log(2222)
        }
    }

</script>

<style scoped>
    .first{
        width: 1200px;
        height:770px;
        
        display: flex;
        justify-content: center;
        border-color: green;
        border-style: solid
    }
    
    .two{
        float:left;
        width: 286px;
        height:157px;
        margin-right: 14px;
        cursor: pointer;
        border-style: solid;
        margin-bottom: 15px;
    }
</style>